<template>
	<view>

		<!-- 添加老板 -->
		<template v-if="defaultWorksite.role!=3">
			<view class="bossList_con">
				<view class="bossItem" v-if="bossInfo.id>0" @click="delBoss">
					<view class="bossAvatar">{{bossInfo.user_name}}</view>
					<view class="bossCon">
						<view class="bossName">{{bossInfo.user_name}}</view>
						<view class="bossRole">当前工地老板或合伙人</view>
					</view>
					<u-icon name="minus-circle" color="#B3B3B3" size="50"></u-icon>
				</view>
				<button class="bossItem" open-type="share" hover-class="none" v-if="bossInfo.id==0"
					@click="shareSelectType(3)">
					<image src="/static/worker/workerBoss.png" mode="" class="bossDefault"></image>
					<view class="bossCon">
						<view class="bossName">添加老板或合伙人</view>
						<view class="bossRole">添加后老板和合伙人都可以记工记账</view>
					</view>
					<u-icon name="plus-circle" color="#B3B3B3" size="50"></u-icon>
				</button>
			</view>
		</template>

		<u-gap height="20" bg-color="#F5F5F5"></u-gap>

		<!-- 选项卡 -->
		<view class="recordTab_box">
			<view class="recordTab_con">
				<view :class="'recordTabItem '+(recordTabIndex==0?'active':'')" @click="tabClick(0)">
					<text>在职</text>
				</view>
				<view :class="'recordTabItem '+(recordTabIndex==1?'active':'')" @click="tabClick(1)">
					<text>离职</text>
				</view>
			</view>
		</view>

		<!-- 顶部 -->
		<view class="workerHead_box">
			<view class="workerNum">人数：{{workerList.length}}</view>
			<view class="workerAll" @click="selectAll">
				<text>全选</text>
				<icon type="success" color="#0088FE" v-if="selectAllStatus" />
				<icon type="circle" v-else />
			</view>
		</view>

		<!-- 列表 -->
		<view class="workerList_box">
			<view class="workerList_con">
				<view class="workerItem" v-for="(item,index) in workerList" :key="index" >
					<!-- @click="goPage('./workerDetail?id='+item.id)" -->
					
					<view class="workerItemLeft" @click="workerSelect(index)">
						<view class="workerSelect">
							<icon type="success" color="#327FE8" v-if="item.selected" />
							<icon type="circle" v-else />
						</view>
						<view class="workerAvatar">
							{{item.userInfo.name_str}}
						</view>
						<view class="workerCon">
							<view class="workerName">{{item.userInfo.name}}</view>
							<view class="workerInfo">
								{{item.userInfo.mobile}}
								<text v-if="item.userInfo.mobile ">|</text>
								{{item.work_class?item.work_class:''}}
								<text v-if="item.work_class">|</text>
								{{item.salary==0? '未设工资': item.salary+'元/'}}{{item.work_type==1?"小时":'工'}}
								
								<text v-if="item.overtime_salary>0">加班:{{item.overtime_salary}}元/小时</text>
							</view>
						</view>
					</view>
					
					<view class="workerItemRight" @click="peopleEdit(item.id)">
						<u-icon name="setting" color="#999" size="50"></u-icon>
					</view>
					
				</view>
			</view>
			<!-- 分页 -->
			<view class="dataEmpty_con" v-if="workerList.length==0">
				<u-empty></u-empty>
			</view>
		</view>

		<!-- 底部操作 -->
		<u-gap height="152" bg-color="#fff"></u-gap>
		<view class="handlePost_con handleFixed" v-if="recordTabIndex==0">
			<view class="delBtn" @click="workerDel">离 职</view>
			<view class="completeBtn" @click="goPage('./workerAdd')">添加工友
			</view>
		</view>
		<view class="handlePost_con handleFixed" v-if="recordTabIndex==1">
			<view class="completeBtn" @click="recoverClick">恢复工友</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 选项卡：0在职、1离职、2删除
				recordTabIndex: '0',

				// 工人列表
				workerList: [],
				yes_num: 0,
				no_num: 0,
				del_num: 0,

				// 全选状态
				selectNum: 0,
				selectAllStatus: false,

				shareType: 0,

				// 工地老板信息
				bossInfo: {
					id: 0
				},
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
		},
		onShow() {
			var _this = this;
			_this.getWorkerStatistics();
			_this.getWorkerList();
		},
		onReady() {

		},
		onShareAppMessage() {
			var _this = this;
			var shareType = _this.shareType;
			var title = '带班邀请您加入工地';
			if (shareType == 2) {
				title = _this.defaultWorksite.project_name + '的带班，给你转交带班权限';
			}

			if (shareType == 3) {
				title = _this.defaultWorksite.project_name + '的带班，邀请成工地老板';
			}
			return {
				title: title,
				imageUrl: '/static/sharePic.jpg',
				path: '/pages/worksite/worksiteJoin?project_id=' + this.defaultWorksite.project_id +
					'&type=' + shareType
			}
		},
		methods: {
			
			peopleEdit(idData){
				console.log(idData)
				uni.navigateTo({
					url:'/pages/worker/peopleEdit?id='+idData
				})
			},
			
			// 选项卡切换
			tabClick(val) {
				this.recordTabIndex = val;
				this.getWorkerList();
			},

			// 获取工人状态统计
			getWorkerStatistics() {
				var _this = this;
				_this.$u.get('/api/project.member/memberStatusNum', {
					project_id: _this.defaultWorksite.project_id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人状态统计==");
					console.log(res);
					_this.yes_num = res.data.yes_num;
					_this.no_num = res.data.no_num;
					_this.del_num = res.data.del_num;
				}).catch(res => {
					console.log(res);
				})
			},

			// 获取工人列表
			getWorkerList() {
				var _this = this;
				_this.$u.get('/api/project.member/getList', {
					project_id: _this.defaultWorksite.project_id,
					pages: 1,
					limit: 100000,
					quit: _this.recordTabIndex,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人列表==");
					console.log(res);
					var workerList = res.data;
					for (var i = 0; i < workerList.length; i++) {
						workerList[i].selected = false;
					}
					_this.workerList = workerList;

					// 工地老板信息
					if (res.extend.bossInfo) {
						_this.bossInfo = res.extend.bossInfo;
					}
				}).catch(res => {
					console.log(res);
				})
			},

			// 工人单选
			workerSelect(index) {
				// console.log(index);
				var _this = this;
				var workerList = _this.workerList;
				workerList[index].selected = !workerList[index].selected;
				// console.log("==工人单选==")
				// console.log(workerList)

				// 判断是否达到全选
				var selectNum = 0;
				for (var i = 0; i < workerList.length; i++) {
					if (workerList[i].selected == true) {
						selectNum++;
					}
				}
				if (selectNum == workerList.length) {
					_this.selectAllStatus = true;
				} else {
					_this.selectAllStatus = false;
				}

				_this.workerList = workerList;
				_this.selectNum = selectNum;
			},

			// 全选
			selectAll() {
				var _this = this;
				var selectAllStatus = _this.selectAllStatus;
				selectAllStatus = !selectAllStatus;

				var workerList = _this.workerList;
				for (let i = 0; i < workerList.length; i++) {
					workerList[i].selected = selectAllStatus;
				}

				// 判断是否达到全选
				var selectNum = 0;
				for (var i = 0; i < workerList.length; i++) {
					if (workerList[i].selected == true) {
						selectNum++;
					}
				}
				if (selectNum == workerList.length) {
					_this.selectAllStatus = true;
				} else {
					_this.selectAllStatus = false;
				}

				_this.selectAllStatus = selectAllStatus;
				_this.workerList = workerList;
				_this.selectNum = selectNum;
			},

			// 批量离职
			workerDel: function() {
				var _this = this;
				var workerList = _this.workerList;
				var workerIdsArray = [];
				for (var i = 0; i < workerList.length; i++) {
					if (workerList[i].selected == true) {
						workerIdsArray.push(workerList[i].id);
					}
				}

				if (workerIdsArray.length == 0) {
					uni.showToast({
						title: '请至少选择一个工人',
						icon: 'none'
					})
					return;
				}
				var workerIds = workerIdsArray.join(',');
				_this.memberOffice(workerIds, 1);
			},

			deletePeople() {
				var _this = this;
				var workerList = _this.workerList;
				var workerIdsArray = [];
				for (var i = 0; i < workerList.length; i++) {
					if (workerList[i].selected == true) {
						workerIdsArray.push(workerList[i].id);
					}
				}

				if (workerIdsArray.length == 0) {
					uni.showToast({
						title: '请至少选择一个工人',
						icon: 'none'
					})
					return;
				}
				var workerIds = workerIdsArray.join(',');
				console.log('选中的工人ids：' + workerIds);

				uni.showModal({
					title: '提示',
					content: '是否确定删除该工人的所有数据，删除后将无法恢复，请慎重操作？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.post('/api/project.member/deleteProjectMember', {
								member_id: workerIds,
								type: 'project',
								project_id: _this.defaultWorksite.project_id
							}).then(res => {
								_this.updataData();
								console.log(res);
								uni.showToast({
									title: res.msg,
									duration: 2000
								});

								setTimeout(function() {
									_this.getWorkerList();
									_this.getWorkerStatistics();
									_this.selectAllStatus = false;
								}, 2000)
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 删除老板
			delBoss() {
				var _this=this;
				uni.showModal({
					content: '您确定要删除吗？',
					success: (res) => {
						console.log(res)
						if (res.confirm) {
							var bossInfo = _this.bossInfo;
							_this.$u.post('/api/project.member/deleteBoss', {
								member_id: bossInfo.id,
							}).then(res => {
								uni.showToast({
									title: '删除成功'
								})
								_this.getWorkerStatistics();
								_this.getWorkerList();
								
							}).catch(res => {
								console.log(res);
							})
						}
					}
				})
			},

			// 添加老板
			shareSelectType(type) {
				console.log(type);
				this.shareType = type;
			},

			/**
			 * 数据修复
			 */
			updataData() {
				var _this = this;
				_this.$u.get('/api/project.repairdata/updateProjectAllData', {
					project_id: _this.defaultWorksite.project_id
				}).then(res => {

				})
			},

			// 恢复
			recoverClick() {
				var _this = this;
				var workerList = _this.workerList;
				var workerIdsArray = [];
				for (var i = 0; i < workerList.length; i++) {
					if (workerList[i].selected == true) {
						workerIdsArray.push(workerList[i].id);
					}
				}

				if (workerIdsArray.length == 0) {
					uni.showToast({
						title: '请至少选择一个工人',
						icon: 'none'
					})
					return;
				}
				var workerIds = workerIdsArray.join(',');
				_this.memberOffice(workerIds, 0);
			},

			memberOffice(ids, type) {
				var _this = this;
				_this.$u.post('/api/project.member/memberOffice', {
					ids: ids,
					value: type,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						_this.getWorkerList();
						_this.getWorkerStatistics();
						_this.selectAllStatus = false;
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	// 添加老板
	.bossList_con {
		padding: 0 30rpx;
	}

	.bossItem {
		padding: 30rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bossAvatar {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 24rpx;
		color: $uni-color-white;
		border-radius: 10rpx;
		background: #ffc30b;
		overflow: hidden;
	}

	.bossDefault {
		width: 90rpx;
		height: 90rpx;
	}

	.bossCon {
		flex: 2;
		text-align: left;
		margin: 0 20rpx;
	}

	.bossName {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.bossRole {
		font-size: 24rpx;
		color: $uni-color-text;
		margin-top: 20rpx;
	}

	// 顶部
	.workerHead_box {
		padding: 30rpx;
		border-bottom: 2rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.workerNum {
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color-active;
	}

	.workerAll {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.workerAll text {
		margin-right: 10rpx;
	}

	// 列表
	.workerList_box {
		padding: 0 30rpx;
	}

	.workerList_con {}

	.workerItem {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
		overflow: hidden;
		// display: flex;
		justify-content: space-between;
		align-items: center;
		width:100%;
	}
	.workerItemLeft{
		width: 500rpx;
		float: left;
	}
	.workerItemRight{
		width: 150rpx;
		float: right;
		text-align: right;
		line-height: 40rpx;
		padding-top: 20rpx;
	}
	.workerSelect {
		float: left;
		margin-top: 20rpx;
	}

	.workerAvatar {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color-white;
		border-radius: 10rpx;
		background: $uni-color-active;
		overflow: hidden;
		margin: 0 20rpx;
		float: left;
	}

	.workerCon {
		flex: 2;
	}

	.workerName {
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.workerInfo {
		font-size: 24rpx;
		color: $uni-color-text;
		padding-top: 10rpx;
		overflow: hidden;
	}

	.workerInfo text {
		margin: 0 10rpx;
	}
</style>
